<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { searchPageArticleFront } from '@/api/article';
import { useHead } from '@vueuse/head';
import type { CategoryAgg, SearchResult } from '@/types/search.ts';
import type { AutocompleteSuggestion } from '@/api/article/types';
import LayoutFloatingButtons from '@/components/layout-floating-buttons.vue';
import LayoutFooter from '@/components/layout-footer.vue';
import SearchAutocomplete from '@/components/search-autocomplete.vue';
import {
  PhMagnifyingGlass,
  PhX,
  PhClock,
  PhEye,
  PhChatCircle,
  PhArrowRight,
  PhCaretLeft,
  PhCaretRight
} from '@phosphor-icons/vue';
import StarryBackground from '@/components/StarryBackground.vue';

const route = useRoute();
const router = useRouter();

// 核心状态
const keyword = ref('');
const loading = ref(false);
const searchResults = ref<SearchResult>({
  total: 0,
  pages: 0,
  list: []
});
const categoryAggs = ref<CategoryAgg[]>([]);
const selectedCategory = ref('');

// 分页
const currentPage = ref(1);
const pageSize = ref(6);

// 排序选项
const sortOptions = [
  { label: '相关度', value: 'relevance' },
  { label: '最新发布', value: 'newest' },
  { label: '最多浏览', value: 'views' }
];
const currentSort = ref('relevance');

// 搜索历史
const searchHistory = ref<string[]>(
  JSON.parse(localStorage.getItem('searchHistory') || '[]')
);

// 回到顶部
const showBackTop = ref(false);

// 月亮DOM引用
const moonElement = ref<HTMLDivElement | null>(null);

// 监听滚动
onMounted(() => {
  window.addEventListener('scroll', () => {
    showBackTop.value = window.scrollY > 300;
  });
});

onUnmounted(() => {
  window.removeEventListener('scroll', () => {});
});

// 回到顶部方法
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 处理分类点击
const handleCategoryClick = (category: string) => {
  selectedCategory.value = selectedCategory.value === category ? '' : category;
  currentPage.value = 1;
  performSearch();
};

// 处理排序变化
const handleSortChange = (sort: string) => {
  currentSort.value = sort;
  currentPage.value = 1;
  performSearch();
};

// 执行搜索
const performSearch = async () => {
  if (!keyword.value.trim()) return;

  loading.value = true;
  try {
    const { data } = await searchPageArticleFront({
      keyword: keyword.value,
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      categoryName: selectedCategory.value,
      sort: currentSort.value
    });

    searchResults.value = data.articles;
    categoryAggs.value = data.categoryAggs;

    // 保存搜索历史
    if (!searchHistory.value.includes(keyword.value)) {
      searchHistory.value.unshift(keyword.value);
      searchHistory.value = searchHistory.value.slice(0, 10);
      localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
    }

    // 更新路由
    router.push({
      query: {
        keyword: keyword.value,
        page: currentPage.value,
        categoryName: selectedCategory.value || undefined,
        sort: currentSort.value
      }
    });
  } catch (error) {
    console.error('搜索失败:', error);
  } finally {
    loading.value = false;
  }
};

// 处理分页
const handlePageChange = (page: number) => {
  currentPage.value = page;
  performSearch();
  scrollToTop();
};

// 监听路由变化
watch(() => route.query, (newQuery) => {
  const { keyword: newKeyword, page, categoryName, sort } = newQuery;
  if (newKeyword) {
    keyword.value = newKeyword as string;
    currentPage.value = Number(page) || 1;
    selectedCategory.value = categoryName as string || '';
    currentSort.value = sort as string || 'relevance';
    performSearch();
  }
}, { immediate: true });



// 清除历史记录
const clearHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem('searchHistory');
};

// 处理自动补全选择
const handleSuggestionSelect = (suggestion: AutocompleteSuggestion) => {
  // 直接跳转到文章详情页
  router.push(`/detail/${suggestion.slug}?id=${suggestion.articleId}`);
};

// 处理自动补全搜索
const handleAutocompleteSearch = (searchKeyword: string) => {
  keyword.value = searchKeyword;
  performSearch();
};

// 动态设置页面标题和描述
watch([keyword, searchResults], () => {
  useHead({
    title: keyword.value
      ? `搜索"${keyword.value}" - StarMist`
      : '搜索 - StarMist',
    meta: [
      {
        name: 'description',
        content: `搜索结果：${searchResults.value.total}个相关内容`
      }
    ]
  });
});

// 监听搜索结果变化，为每个卡片添加索引
watch(() => searchResults.value.list, (newList) => {
  if (newList) {
    nextTick(() => {
      const cards = document.querySelectorAll('.article-card');
      cards.forEach((card, index) => {
        const divElement = card as HTMLDivElement;
        divElement.style.setProperty('--card-index', index.toString());
      });
    });
  }
}, { deep: true });

// 处理月亮点击 - 添加类型声明
const handleMoonClick = (event: MouseEvent) => {
  // 防止重复点击
  const moon = moonElement.value;
  if (!moon || moon.getAttribute('data-animating') === 'true') return;

  // 标记正在动画中
  moon.setAttribute('data-animating', 'true');

  // 创建水波纹效果
  createRippleEffect(event, moon);

  // 动画结束后清除标记
  setTimeout(() => {
    moon.setAttribute('data-animating', 'false');
  }, 2000);
};

// 创建水波纹效果 - 添加类型声明
const createRippleEffect = (event: MouseEvent, element: HTMLElement) => {
  // 添加月亮光晕效果
  element.classList.add('moon-glow');

  // 2秒后移除光晕
  setTimeout(() => {
    element.classList.remove('moon-glow');
  }, 2000);

  // 创建3个水波纹元素
  for (let i = 0; i < 3; i++) {
    const ripple = document.createElement('div');
    ripple.className = 'moon-ripple';

    // 设置延迟
    if (i > 0) {
      ripple.style.animationDelay = `${i * 400}ms`; // 延长间隔
    }

    // 添加到月亮元素
    element.appendChild(ripple);

    // 动画结束后移除
    setTimeout(() => {
      if (element.contains(ripple)) {
        element.removeChild(ripple);
      }
    }, 2500 + i * 400); // 延长时间以匹配新的动画
  }
};
</script>
<template>
  <div class="search-page">
    <!-- 搜索区域 -->
    <div class="search-container">
      <!-- 使用星空背景组件 -->
      <StarryBackground>
        <!-- 月亮 - 增强表面细节 -->
        <div class="moon" ref="moonElement" @click="handleMoonClick" data-animating="false"></div>
      </StarryBackground>

      <div class="search-area">
        <h1>文章搜索</h1>
        <p class="subtitle">探索你感兴趣的内容</p>

        <div class="search-box">
          <SearchAutocomplete
            v-model="keyword"
            placeholder="输入关键词搜索..."
            :category-name="selectedCategory"
            :size="8"
            :min-length="2"
            :debounce-delay="300"
            @search="handleAutocompleteSearch"
            @select="handleSuggestionSelect"
          />
          <button @click="performSearch" class="search-btn">搜一搜</button>
        </div>

        <!-- 搜索历史 -->
        <div v-if="searchHistory.length" class="search-tags">
          <div class="tags-header">
            <PhClock :size="16" color="white" weight="regular" />
            <span>最近搜索</span>
            <button @click="clearHistory" class="clear-all">清除全部</button>
          </div>
          <div class="tags-content">
            <span
              v-for="(item, index) in searchHistory"
              :key="index"
              @click="keyword = item; performSearch()"
            >
              {{ item }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果区域 -->
    <div class="results-container">
      <!-- 筛选区 -->
      <div class="filter-bar">
        <div class="filter-left">
          <span class="result-count">找到 {{ searchResults.total }} 个结果</span>
          <div class="categories" v-if="categoryAggs.length">
            <button
              v-for="category in categoryAggs"
              :key="category.categoryName"
              :class="['category-btn', { active: selectedCategory === category.categoryName }]"
              @click="handleCategoryClick(category.categoryName)"
            >
              {{ category.categoryName }}
              <span class="count">{{ category.count }}</span>
            </button>
          </div>
        </div>
        <div class="filter-right">
          <div class="sort-options">
            <button
              v-for="option in sortOptions"
              :key="option.value"
              :class="['sort-btn', { active: currentSort === option.value }]"
              @click="handleSortChange(option.value)"
            >
              {{ option.label }}
            </button>
          </div>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="articles-grid">
        <div v-if="loading" class="loading-state">
          <div class="spinner"></div>
          <span>搜索中...</span>
        </div>

        <div v-else-if="searchResults.total === 0" class="empty-state">
          <PhMagnifyingGlass :size="48" color="#94a3b8" weight="duotone" />
          <h3>未找到相关内容</h3>
          <p>换个关键词试试？</p>
        </div>

        <template v-else>
          <router-link
            v-for="article in searchResults.list"
            :key="article.id"
            :to="`/detail/${article.slug}?id=${article.id}`"
            class="article-card"
          >
            <div class="card-content">
              <div class="card-header">
                <span class="category">{{ article.categoryName }}</span>
                <span class="date">{{ article.publishTime }}</span>
              </div>
              <h3 class="title" v-html="article.title"></h3>
              <p class="summary" v-html="article.summary"></p>
              <div class="card-footer">
                <div class="stats">
                  <span>
                    <PhEye :size="16" color="#94a3b8" weight="regular" />
                    {{ article.views }}
                  </span>
                  <span>
                    <PhChatCircle :size="16" color="#94a3b8" weight="regular" />
                    {{ article.commentsCount }}
                  </span>
                </div>
                <span class="read-more">
                  阅读全文
                  <PhArrowRight :size="16" class="arrow-icon" weight="regular" />
                </span>
              </div>
            </div>
          </router-link>
        </template>
      </div>

      <!-- 分页 -->
      <div v-if="searchResults.total > pageSize" class="pagination">
        <button
          class="page-btn"
          :disabled="currentPage === 1"
          @click="handlePageChange(currentPage - 1)"
        >
          <PhCaretLeft :size="16" weight="regular" />
        </button>
        <div class="page-numbers">
          <button
            v-for="page in searchResults.pages"
            :key="page"
            :class="['page-btn', { active: currentPage === page }]"
            @click="handlePageChange(page)"
          >
            {{ page }}
          </button>
        </div>
        <button
          class="page-btn"
          :disabled="currentPage === searchResults.pages"
          @click="handlePageChange(currentPage + 1)"
        >
          <PhCaretRight :size="16" weight="regular" />
        </button>
      </div>
    </div>
  </div>
  <LayoutFloatingButtons />
  <LayoutFooter />
</template>
<style lang="less" scoped>
.search-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

// 搜索区域
.search-container {
  background: linear-gradient(to bottom, #0f172a, #1e293b);
  padding: 60px 20px;
  color: white;
  text-align: center;
  position: relative;
  overflow: visible; // 允许下拉框显示
  z-index: 999;

  // 星空背景
  .starry-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; // 这会阻止所有子元素的鼠标事件
    z-index: 0;
  }

  // 星星容器
  .stars-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  // 星星基础样式
  .star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    animation: simpleTwinkle 3s infinite ease-in-out;
    animation-delay: var(--delay);
    will-change: opacity, transform;

    // 微小星星
    &.tiny {
      opacity: 0.6;
      box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.3);
    }

    // 小星星
    &.small {
      opacity: 0.7;
      box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.4);
    }

    // 中星星
    &.medium {
      opacity: 0.8;
      box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.5);
    }
  }

  // 流星效果
  .shooting-stars {
    position: absolute;
    width: 100%;
    height: 100%;

    .shooting-star {
      position: absolute;
      top: var(--top);
      left: var(--left);
      width: 100px;
      height: 1px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
      transform: rotate(-45deg);
      animation: simpleShootingStar 8s infinite;
      animation-delay: var(--delay);
      opacity: 0;
      will-change: transform, opacity;
    }
  }

  // 月亮效果 - 增强表面细节
  .moon {
    position: absolute;
    top: 40px;
    right: 60px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease;
    pointer-events: auto;
    z-index: 2;
    overflow: visible; // 允许水波纹溢出月亮边界

    // 月球表面细节增强
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.3) 2%, transparent 6%),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.4) 3%, transparent 8%),
        radial-gradient(circle at 40% 60%, rgba(203, 213, 225, 0.4) 4%, transparent 12%),
        radial-gradient(circle at 80% 40%, rgba(203, 213, 225, 0.2) 6%, transparent 15%),
        radial-gradient(circle at 15% 75%, rgba(203, 213, 225, 0.3) 4%, transparent 10%),
        radial-gradient(circle at 65% 70%, rgba(203, 213, 225, 0.2) 5%, transparent 12%);
      opacity: 0.8;
    }

    // 月球陨石坑阴影
    &::after {
      content: '';
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      box-shadow:
        inset 3px 2px 0 rgba(255, 255, 255, 0.4),
          inset -2px -3px 5px rgba(0, 0, 0, 0.1);
    }

    &:hover {
      transform: scale(1.05);
    }

    // 优化水波纹效果 - 更柔和
    .moon-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0);
      border: 1px solid rgba(255, 255, 255, 0.6);
      width: 100%;
      height: 100%;
      animation: gentleRipple 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
    }
  }

  // 星云效果
  .nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;

    &-1 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
      top: -100px;
      right: -50px;
    }
  }

  // 确保搜索区域内容在图形之上
  .search-area {
    position: relative;
    z-index: 100;
  }
}

// 简化的星星闪烁动画
@keyframes simpleTwinkle {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

// 简化的流星动画
@keyframes simpleShootingStar {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateX(-200px) translateY(200px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

// 搜索区域
.search-container {
  color: white;
  text-align: center;

  .search-area {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInDown 0.6s ease;

    h1 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .subtitle {
      font-size: 16px;
      opacity: 0.9;
      margin-bottom: 32px;
    }

    .search-box {
      position: relative;
      display: flex;
      align-items: stretch;
      gap: 8px;
      animation: fadeInUp 0.6s ease;
      z-index: 1000;

      // 自动补全组件容器
      :deep(.search-autocomplete) {
        flex: 1;

        .search-input-container {
          height: 60px;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

          .search-input {
            height: 100%;
            font-size: 16px;

            &::placeholder {
              color: #94a3b8;
            }
          }
        }

                 // 确保下拉框在所有内容之上
         .suggestions-dropdown {
           z-index: 1000000;
         }
      }

      .search-btn {
        height: 60px;
        padding: 0 24px;
        border: none;
        border-radius: 12px;
        background: #2563eb;
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;

        &:hover {
          background: #1d4ed8;
          transform: translateY(-1px);
        }
      }
    }

    .search-tags {
      margin-top: 24px;
      text-align: left;
      animation: fadeIn 0.6s ease 0.3s both;

      .tags-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 14px;

        .clear-all {
          margin-left: auto;
          background: none;
          border: none;
          color: white;
          opacity: 0.8;
          cursor: pointer;
          font-size: 13px;
          padding: 4px 8px;
          border-radius: 4px;
          transition: all 0.2s;

          &:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }

      .tags-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        span {
          padding: 6px 12px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 6px;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
          }
        }
      }
    }
  }
}

// 结果区域
.results-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;

  .filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
    animation: fadeIn 0.6s ease;

    .filter-left {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;

      .result-count {
        font-size: 16px;
        color: #1e293b;
        font-weight: 500;
      }

      .categories {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;

        .category-btn {
          padding: 6px 12px;
          border: none;
          border-radius: 6px;
          background: white;
          color: #64748b;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 6px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

          .count {
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
          }

          &:hover {
            background: #f8fafc;
            color: #334155;
            transform: translateY(-1px);
          }

          &.active {
            background: #2563eb;
            color: white;

            .count {
              background: rgba(255, 255, 255, 0.2);
            }
          }
        }
      }
    }

    .filter-right {
      .sort-options {
        display: flex;
        gap: 8px;

        .sort-btn {
          padding: 8px 16px;
          border: none;
          border-radius: 6px;
          background: white;
          color: #64748b;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

          &:hover {
            background: #f8fafc;
            color: #334155;
            transform: translateY(-1px);
          }

          &.active {
            background: #2563eb;
            color: white;
          }
        }
      }
    }
  }

  .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;

    .article-card {
      animation: cardPopUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
      animation-delay: calc(var(--card-index, 0) * 0.1s);
      background: white;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      height: 100%;
      position: relative;

      &:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

        .card-content {
          .title {
            color: #2563eb;
          }

          .read-more {
            color: #2563eb;

            .arrow-icon {
              transform: translateX(4px);
            }
          }
        }
      }

      .card-content {
        height: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12px;
          flex-shrink: 0;

          .category {
            padding: 4px 8px;
            background: #f1f5f9;
            border-radius: 4px;
            font-size: 12px;
            color: #64748b;
          }

          .date {
            font-size: 12px;
            color: #94a3b8;
          }
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          color: #1e293b;
          line-height: 1.5;
          margin-bottom: 8px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          flex-shrink: 0;
          transition: color 0.3s ease;

          :deep(em) {
            font-style: normal;
            color: #2563eb;
          }
        }

        .summary {
          font-size: 14px;
          line-height: 1.6;
          color: #64748b;
          margin-bottom: 16px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          flex: 1;

          :deep(em) {
            font-style: normal;
            color: #2563eb;
          }
        }

        .card-footer {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          border-top: 1px solid #f1f5f9;
          flex-shrink: 0;
          box-sizing: border-box;

          .stats {
            display: flex;
            align-items: center;
            gap: 16px;
            min-width: 0;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
              color: #94a3b8;
              font-size: 13px;
              white-space: nowrap;
            }
          }

          .read-more {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #64748b;
            font-size: 13px;
            transition: all 0.3s ease;
            white-space: nowrap;
            margin-left: 12px;
            flex-shrink: 0;

            .arrow-icon {
              transition: transform 0.3s ease;
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    animation: fadeIn 0.6s ease;

    .page-btn {
      min-width: 40px;
      height: 40px;
      border: none;
      border-radius: 8px;
      background: white;
      color: #64748b;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

      &:hover:not(:disabled) {
        background: #f8fafc;
        color: #334155;
        transform: translateY(-1px);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &.active {
        background: #2563eb;
        color: white;
      }
    }
  }
}

// 加载和空状态
.loading-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0;
  color: #94a3b8;
  animation: fadeIn 0.6s ease;

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: #94a3b8;
  animation: fadeIn 0.6s ease;

  h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #64748b;
  }

  p {
    font-size: 14px;
  }
}

// 动画关键帧
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardPopUp {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

// 更柔和的水波纹动画
@keyframes gentleRipple {
  0% {
    width: 0%;
    height: 0%;
    opacity: 0.5;
    border-width: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    opacity: 0.3;
    border-width: 1px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
    border-width: 1px;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
}

// 月亮发光效果 - 更柔和
.moon-glow {
  animation: softMoonGlow 2s ease-in-out;
}

@keyframes softMoonGlow {
  0% {
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3);
  }
  40% {
    box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.5),
    0 0 40px 20px rgba(255, 255, 255, 0.3),
    0 0 60px 30px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3);
  }
}

// 响应式
@media (max-width: 768px) {
  .search-container {
    padding: 40px 20px;

    .search-area {
      h1 {
        font-size: 24px;
      }

      .search-box {
        .search-btn {
          padding: 0 16px;
        }
      }
    }
  }

  .results-container {
    padding: 20px;

    .filter-bar {
      margin-bottom: 24px;

      .filter-left {
        width: 100%;
        justify-content: space-between;
      }

      .filter-right {
        width: 100%;

        .sort-options {
          justify-content: flex-end;
        }
      }
    }

    .articles-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}
</style>
